<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" type="text/css" />
    <link rel="stylesheet" th:href="@{/css/milligram.min.css}" type="text/css" />
    <link rel="stylesheet" th:href="@{/css/fonts.style.css}" type="text/css" />
    <link rel="stylesheet" th:href="@{/css/style.css}" type="text/css" />
    <script th:src="@{/js/jquery-3.4.1.js}"></script>
    <script th:src="@{/js/jQueryCode.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <style>
        #phone-error, #code-error {
            display: block;
        }
    </style>
</head>
<body>
<div class="top-nav animation-bg-color-skyblue">
    <div class="logo">
        <a href="#"><img th:src="@{/img/logo.png}" /></a>
    </div>
    <div class="account-check fr">
        <div class="before-login">
            <a class="a-btn animation" href="/user/login">
                <span class="icon-enter"></span>登录
            </a>
            <a class="a-btn animation" href="/user/register">
                <span class="icon-user-plus"></span>注册
            </a>
        </div>
        <div class="after-login hide">
            <!--<a class="a-btn animation fr" href="#">-->
            <!--<span class="icon-exit"></span>退出-->
            <!--</a>-->
            <h5 class="fr">欢迎登陆:13049148938</h5>
        </div>
    </div>

    <div class="s-side animation-bg-color-skyblue">
        <ul>
            <!--这部分是导航栏信息。-->
            <li class="s-firstItem first">
                <a href="/user/index">
                    <i class="fa fa-home"></i>
                    <span>首页</span>
                </a>
            </li>
            <!--查找-->
            <li class="first">
                <div class="d-firstNav s-firstNav clearfix">
                    <i class="fa fa-bars"></i>
                    <span>查找</span>
                    <i class="fa fa-caret-right fr"></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/evaluate/toFindEval">
                            查找医生&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>
                </ul>
            </li>
            <!--预约挂号-->
            <li class="first">
                <div class="d-firstNav s-firstNav clearfix">
                    <i class="fa fa-bars"></i>
                    <span>预约挂号</span>
                    <i class="fa fa-caret-right fr"></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/reservation/toReserve">
                            预约&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>
                </ul>
            </li>

            <!--社区-->
            <li class="first">
                <div class="d-firstNav s-firstNav">
                    <i class="fa fa-bars"></i>
                    <span>社区</span>
                    <i class="fa fa-caret-right fr" ></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>文章</span>
                            <i class="fa fa-caret-right fr"></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/community/toSendArticle">
                                    发表文章&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/community/showArticle">
                                    浏览文章&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>帖子</span>
                            <i class="fa fa-caret-right fr "></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/community/toCommunity">
                                    浏览帖子&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <!--个人中心-->
            <li class="first">
                <div class="d-firstNav s-firstNav clearfix">
                    <i class="fa fa-bars"></i>
                    <span>个人中心</span>
                    <i class="fa fa-caret-right fr"></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>个人资料</span>
                            <i class="fa fa-caret-right fr"></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/user/userInfo">
                                    个人信息&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/user/password">
                                    修改密码&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/user/verify">
                                    实名认证&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>钱包</span>
                            <i class="fa fa-caret-right fr"></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/reservation/toWallet">
                                    我的钱包&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/reservation/toRecharge">
                                    充值&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/reservation/toBill">
                                    我的账单&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/community/toCollection">
                            我的收藏&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/evaluate/toMyEvaluate">
                            我的评价&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>

                </ul>
            </li>
        </ul>
    </div>
</div>
<div class="layout">
    <div class="container">
        <h3>修改密码</h3>
        <hr class="divider"><!-- 分界线 -->
        <form id="form" class="row" th:action="@{/user/checkcode}" method="post">
            <!--手机号-->
            <div class="col-md-12 input-group">
                <label class="input-group-addon d-flex align-items-center" for="phone">
                    <span class="icon-mobile"></span>手机号
                </label>
                <input id="phone" name="phone" class="form-control" placeholder="手机号" type="text" required="required" />
                <input class="input-btn btn" type="button" value="获取验证码" onclick="getMsgNum(this)"/>
            </div>
            <small><span id="phone-error" style="color: red;"></span></small>

            <!--验证码-->
            <div class="col-md-12 input-group">
                <label class="input-group-addon d-flex align-items-center" for="input_code">
                    <span class="icon-barcode"></span>验证码
                </label>
                <input id="input_code" name="input_code" class="form-control" type="text" placeholder="验证码" th:colspan="2" required="required"/>
            </div>
            <small><span id="code-error" style="color: red;"></span></small>

            <div class="col-md-12 input-group">
                <input class="input-btn btn" type="submit" value="确认"/>
            </div>
        </form>
    </div>
    <div class="bubbles">
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
    </div>
</div>

</body>
<script type="text/javascript">
    $(function () {
        /**
         * 定义校验开关
         */
        var flagPhone = false;
        var flagCode = false;
        /**
         * 校验手机号码
         */
        $("#phone").blur(function () {
            function checkPhone() {
                //获取用户输入数据
                var phone = $("#phone").val();
                //正则
                var re = /^[1][3,4,5,7,8][0-9]{9}$/;
                if (phone == '') {
                    flagPhone = false;
                    $("#phone-error").show().html("电话号码不能为空！");
                } else if (re.test(phone) == false) {
                    flagPhone = false;
                    $("#phone-error").show().html("你的手机号码是地球的吗？！");
                } else {
                    flagPhone = true;
                    $("#phone-error").hide();
                }
            }
            checkPhone();
        });
        /**
         * 校验验证码
         */
        $("#input_code").blur(function () {
            function checkCode() {
                //获取用户输入数据
                var code = $("#input_code").val();

                if (code == '') {
                    flagCode = false;
                    $("#code-error").show().html("验证码不能为空！");
                } else {
                    flagCode = true;
                    $("#code-error").hide();
                }
            }
            checkCode();
        });
        /**
         * 确认按钮
         */
        $("#form").submit(function () {
            if ((flagPhone && flagCode) == true) {
                alert("是本人没错啦！");
            } else {
                alert("输入信息不正确");
                return false;
            }
        });
    });
    /**
     * 获取验证码
     * @param that
     */
    function getMsgNum(that) {
        var phone = $('#phone').val();
        var time = new Date(); //获取当前时间
        var oldtime = time.getTime()+60000; //设置一分钟后验证码过期时间戳
        setButtonStatus(that); // 设置按钮倒计时

        $.post("/user/sendSms",{phone:phone,oldtime:oldtime},function (data) {
            alert(data);
        })
    }
    /**
     * 设置按钮状态
     */
    var wait = 60; // 短信验证码60秒后才可获取下一个
    function setButtonStatus(that) {
        if (wait == 0) {
            that.removeAttribute("disabled");
            that.value="免费获取验证码";
            wait = 60;
        } else {
            that.setAttribute("disabled", true);
            that.value=wait+"秒后可以重新发送";
            wait--;
            setTimeout(function() {
                setButtonStatus(that)
            }, 1000)
        }
    }
</script>
</html>